<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('logger.request.detailTitle')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-tabs type="border-card">
      <el-tab-pane :label="t('logger.request.detailParams')">
        <el-form label-position="top">
          <el-row>
            <el-col :span="2">
              <el-form-item :label="t('logger.request.requestMethod')">
                <span class="value">{{ requestLog?.requestMethod }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item :label="t('logger.db.dbTable')">
                <span class="value">{{ requestLog?.dbTable }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.name')">
                <span class="value">{{ requestLog?.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.url')">
                <span class="value"> {{ requestLog?.url }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item :label="t('logger.request.userName')">
                <span class="value">{{ requestLog?.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.orgId')">
                <span class="value"> {{ requestLog?.orgId }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.headData')">
                <CodeInput
                  v-model="requestLog.headData"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.requestParams')">
                <CodeInput
                  v-model="requestLog.requestParams"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.requestBody')">
                <CodeInput
                  v-model="requestLog.requestBody"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.responseBody')">
                <CodeInput
                  v-model="requestLog.responseBody"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane :label="t('logger.db.title')">
        <WsmTable
          ref="table"
          load-url="/logger-server/logger/loggerdbtablelog/page"
          :change-load="true"
          :convert="convert"
          table-height="405px"
          v-model="queryFormType"
        >
          <template #title>{{ t('logger.db.title') }}</template>
          <template #button="{ row }">
            <template v-if="row">
              <el-button v-hasPermi="'detail'" @click="detail(row.id)" type="primary">{{
                t('common.detail')
              }}</el-button>
            </template>
          </template>
          <template #column>
            <el-table-column prop="exeType" :label="t('logger.db.exeType')" width="100">
              <template #default="scope">
                <template v-if="scope.row.exeType == 'INSERT'">
                  <el-tag type="success">{{ t('logger.db.insert') }}</el-tag>
                </template>
                <template v-else-if="scope.row.exeType == 'UPDATE'">
                  <el-tag type="warning">{{ t('logger.db.update') }}</el-tag>
                </template>
                <template v-else-if="scope.row.exeType == 'DELETE'">
                  <el-tag type="danger">{{ t('logger.db.delete') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="userName" :label="t('logger.db.userName')" width="180" />
            <el-table-column prop="orgId" :label="t('logger.db.orgId')" width="250" />
            <el-table-column prop="dbTable" :label="t('logger.db.dbTable')" width="250" />
            <el-table-column prop="tabComment" :label="t('logger.db.tabComment')" />
            <el-table-column prop="logTime" :label="t('logger.db.logTime')" width="180" />
          </template>
        </WsmTable>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <db-log-detail ref="dbLogDetail" />
</template>
<script setup lang="ts">
import { getApi } from '@/api/logger/requestlog'
import { ConvertType, OrgConvertType, QueryFormType } from '@/components/WsmTable/src/types'
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, ref } from 'vue'
import { CodeInput } from '@/components/CodeMirror'
import { WsmTable } from '@/components/WsmTable'
import DbLogDetail from './DbLogDetail.vue'

const centerDialogVisible = ref(false)
const { t } = useI18n()

const queryFormType: QueryFormType = reactive({
  requestId: {
    value: '',
    clear: false
  }
})

const convert = ref<ConvertType>({
  dateFormat: [
    {
      name: 'logTime',
      format: 'yyyy-MM-dd HH:mm:ss'
    }
  ],
  orgConvert: [
    {
      name: 'orgId',
      type: OrgConvertType.ORG_SHORT_NAME
    }
  ]
})
const requestLog = ref<any>({
  headData: '{}',
  requestParams: '{}',
  requestBody: '{}',
  responseBody: '{}'
})

const loadRequestLog = async (id: string) => {
  const rs = await getApi({ id })
  if (rs.success) {
    const data = rs.data
    data.headData = JSON.stringify(JSON.parse(data.headData), null, 2)
    data.requestParams = JSON.stringify(JSON.parse(data.requestParams), null, 2)
    data.requestBody = JSON.stringify(JSON.parse(data.requestBody), null, 2)
    data.responseBody = JSON.stringify(JSON.parse(data.responseBody), null, 2)
    requestLog.value = data
  }
}

const show = async (id: string) => {
  queryFormType.requestId.value = id
  loadRequestLog(id)
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

const dbLogDetail = ref()

const detail = (id: string) => {
  dbLogDetail.value.show(id)
}

//暴露方法
defineExpose({ show, hide })
</script>
<style scoped lang="less"></style>
